<template>
  <el-container>
    <el-header>
      <el-row>
        <el-button @click="tests">拖拽选项</el-button>
        <el-button type="primary" draggable="true" @node-drag-start="handleDragStart"
                   @node-drag-leave="handleDragLeave" @node-drop="handleDrop">总人口：{{num1}}
        </el-button>
        <el-button type="primary" draggable="true">➕</el-button>
        <el-button type="primary" draggable="true">➖</el-button>
        <el-button type="primary" draggable="true">✖</el-button>
        <el-button type="primary" draggable="true">➗</el-button>
      </el-row>
    </el-header>
    <el-main>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
        @node-drag-enter="handleDragEnter">
      </el-input>
    </el-main>
  </el-container>
</template>
<el-tree
  :data="data"
  node-key="id"
  default-expand-all
  @node-drag-start="handleDragStart"
  @node-drag-enter="handleDragEnter"
  @node-drag-leave="handleDragLeave"
  @node-drag-over="handleDragOver"
  @node-drag-end="handleDragEnd"
  @node-drop="handleDrop"
  draggable
  :allow-drop="allowDrop"
  :allow-drag="allowDrag">
</el-tree>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        textarea: '',
        num1: ''
      }
    },
    mounted() {
      const _this = this;
      axios.post("/populationList")
        .then(function (response) {
          _this.num1 = response.data.populationSum
        }).catch(function (reason) {
        alert("error");
      });
    },
    methods: {
      tests() {
        const _this = this;
        axios.post('/populationList')
          .then(function (response) {
            console.log(response)
            _this.num1 = response.data.populationSum
            alert(response.data.populationSum);
          }).catch(function (reason) {
          alert(reason);
        });
      },
      handleDragStart: function (node, ev) {
        alert("111");
        console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        alert("111");
        console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === '二级 3-1') {
          return type !== 'inner';
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
      }
    }
  }

</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

</style>
